<template>
	<view class="ar">
		<xr-start v-if="t === 1" id="xr-start" disable-scroll :tpurl="startImg" :flag="flag" :spurl="startMp4"
			:width="renderWidth" :height="renderHeight" :style="'width:' + width + 'px;height:' + height + 'px;'"
			@startBase64="startBase64"></xr-start>
		<xr-gltf v-if="t === 2" disable-scroll id="xr-gltf" :flag="flag" class="main-ar-frame" :width="renderWidth"
			:height="renderHeight" :tpurl="startImg" :spurl="startMp4" :scaleo="s1" :scalet="s2" :scalett="s3"
			:rotationo="r1" :rotationt="r2" :rotationtt="r3" @startBase64="startBase64"
			:style="'width:' + width + 'px;height:' + height + 'px;'"></xr-gltf>

		<view class="footer">
			<view v-if="yhq">
				<view class="yhj">
					<view class="mc">
						<view>{{yhqmc}}</view>
						<view>有效期:{{yhqyxq}}</view>
					</view>
					<view class="but" @click="lqyhq">
						<image src="../../static/images/lqyhq.png" mode="scaleToFill" />
						<view class="lq">领取</view>
					</view>
				</view>
				<!-- <button>点击领取</button> -->
			</view>
			<view class="tx">
				<text class="txwz">扫描成功后，如需再次扫描需先点击“重置”按钮</text>
			</view>
			<view class="save" v-if="artype === 2">
				<view v-if="armxxz === 1" class="menu" @click="saveFile(1)">
					<image src="../../static/images/tp.png"></image>
					<view :style="bctpxz === 0 ? wxz : xz">保存图片</view>
				</view>
				<!-- <view v-if="armxxz === 1" class="menu" @click="saveFile(2)">
					<image src="../../static/images/sp.png"></image>
					<view :style="bcspxz === 0 ? wxz : xz">{{ recordStatus == 1 ? '完成保存' : '录制视频' }}</view>
				</view> -->
				<view v-if="armxxz === 1" class="menu">
					<image style="width: 15vw;height: 20rpx;" src="../../static/images/sxx.png"></image>
				</view>
				<view class="menu" @click="xrChange(2)">
					<image src="../../static/images/armx.png"></image>
					<view :style="armxxz === 0 ? wxz : xz">AR模型</view>
				</view>
				<view class="menu" @click="xrChange(4)">
					<image src="../../static/images/arsp.png"></image>
					<view :style="arspxz === 0 ? wxz : xz">AR视频</view>
				</view>
			</view>
			<view class="camera">
				<view class="menu" @click="reset">
					<image src="../../static/images/cz.png"></image>
					<view :style="czxz === 0 ? wxz : xz">重置</view>
				</view>
				<view :class="artype == 1 ? 'active' : 'menu'" @click="xrChange(1)">
					<image src="../../static/images/mfxj.png"></image>
					<view :style="mfxjxz === 0 ? wxz : xz">魔法相机</view>
				</view>
				<view :class="artype == 2 ? 'active' : 'menu'" @click="xrChange(3)">
					<image src="../../static/images/arss.png"></image>
					<view :style="arxz === 0 ? wxz : xz">AR扫一扫</view>
				</view>
			</view>
		</view>
		<Guide ref="guideDialogRef" />
	</view>
</template>

<script>
	import Guide from './Guide.vue';
	import {
		getLocation
	} from '@/nxTemp/utils/locationUtils.js';
	export default {
		components: {
			Guide
		},
		data() {
			return {
				yhqid: '',
				yhqmc: '',
				yhqyxq: '',
				yhq: false,
				bctpxz: 0,
				bcspxz: 0,
				armxxz: 0,
				arspxz: 0,
				czxz: 0,
				arxz: 0,
				mfxjxz: 0,
				xz: 'color: aquamarine;',
				wxz: 'color: white;',
				//录制状态  1开始  2完成保存
				recordStatus: 0,
				t: 3,
				artype: 3,
				width: 300,
				height: 300,
				renderWidth: 300,
				renderHeight: 300,
				flag: true,
				startMp4: '',
				startImg: '',
				s1: 0,
				s2: 0,
				s3: 0,
				r1: 0,
				r2: 0,
				r3: 0,
				tpurl: 'https://www.wx93.cn/upload/test/2.jpg',
				// spurl: 'https://www.wx93.cn/upload/test/sp.mp4',
				spurl: 'https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/butterfly/index.glb',
				mp42: 'https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/butterfly/index.glb'
				// mp42: "https://wujianar-cdn.oss-cn-hangzhou.aliyuncs.com/ardemo/models/kl.gltf"
			};
		},
		onUnload() {
			this.reset()
		},
		onHide() {
			this.reset()
		},
		onLoad(option) {
			this.width = uni.getWindowInfo().windowWidth;
			this.height = uni.getWindowInfo().windowHeight;
			const dpi = uni.getWindowInfo().pixelRatio;
			this.renderWidth = this.width * dpi;
			this.renderHeight = this.height * dpi;
		},
		onShow() {
			this.reset()
			this.getSfxyh()
		},
		methods: {
			lqyhq() {
				this.$http.post('/app/ar/addYhj', {
					id: this.yhqid
				}).then(res => {
					this.toast('领取成功');
					this.yhq = false;
				});
			},
			getSfxyh() {
				this.$http.post('/app/hy/getxyh').then(res => {
					if (res.new === 1) {
						this.$refs.guideDialogRef.open();
					}
				});
			},
			/**
			 * 1保存图片 2录制视频
			 */
			saveFile(type) {
				const child = this.selectComponent('#xr-gltf');
				if (type == 1) {
					this.bctpxz = 1;
					this.bcspxz = 0;
					this.armxxz = 1;
					this.arspxz = 0;
					this.czxz = 0;
					this.arxz = 1;
					this.mfxjxz = 0;
					child.imageSave();
				} else {
					this.bctpxz = 0;
					this.bcspxz = 1;
					this.armxxz = 1;
					this.arspxz = 0;
					this.czxz = 0;
					this.arxz = 1;
					this.mfxjxz = 0;
					switch (this.recordStatus) {
						case 0:
							// 开始录制
							this.recordStatus = 1;
							child.recordVideo(1);
							break;
						case 1:
							// 完成录制
							this.recordStatus = 0;
							child.recordVideo(2);
							break;
					}
				}
			},
			reset() {
				this.artype = 3,
					this.bctpxz = 0,
					this.bcspxz = 0,
					this.armxxz = 0,
					this.arspxz = 0,
					this.czxz = 1,
					this.arxz = 0,
					this.mfxjxz = 0,
					this.t = 3;
				this.flag = true;
				this.recordStatus = 0;
				this.startMp4 = '';
				this.startImg = '';
				this.s1 = 0;
				this.s2 = 0;
				this.s3 = 0;
				this.r1 = 0;
				this.r2 = 0;
				this.r3 = 0;
				this.yhq = false;
			},

			xrChange(e) {
				this.flag = true;
				this.recordStatus = 0;
				this.startMp4 = '';
				this.startImg = '';
				this.s1 = 0;
				this.s2 = 0;
				this.s3 = 0;
				this.r1 = 0;
				this.r2 = 0;
				this.r3 = 0;
				this.yhq = false;
				if (e === 1) {
					this.bctpxz = 0,
						this.bcspxz = 0,
						this.armxxz = 0,
						this.arspxz = 0,
						this.czxz = 0,
						this.arxz = 0,
						this.mfxjxz = 1,
						this.t = e;
					this.artype = e;
				}
				if (e === 2) {
					this.bctpxz = 0,
						this.bcspxz = 0,
						this.armxxz = 1,
						this.arspxz = 0,
						this.czxz = 0,
						this.arxz = 1,
						this.mfxjxz = 0,
						this.t = e;
					this.artype = e;
				}
				if (e === 3) {
					this.bctpxz = 0,
						this.bcspxz = 0,
						this.armxxz = 1,
						this.arspxz = 0,
						this.czxz = 0,
						this.arxz = 1,
						this.mfxjxz = 0,
						this.t = 2
					this.artype = 2;
				}
				if (e === 4) {
					this.bctpxz = 0,
						this.bcspxz = 0,
						this.armxxz = 0,
						this.arspxz = 1,
						this.czxz = 0,
						this.arxz = 1,
						this.mfxjxz = 0,
						this.t = 1
					this.artype = 2;
				}
			},

			/** 魔法相机 一秒回调一次
			 * base64 图片 回调
			 */
			async startBase64(e) {
				try {
					let l = await getLocation();
					// console.log(uni.getStorageSync('token'))
					if (this.artype === 1) {
						let res = await this.$http.post('/app/ar/querySp', {
							base64: e.detail,
							jwd: l.longitude + ',' + l.latitude
						});
						if (res.map.status === 1) {
							console.log(res.map.sp.url);
							console.log(res.map.tp.url);
							(this.startMp4 = res.map.sp.url), (this.startImg = res.map.tp.url), (this.flag = false);
							console.log('标识', this.flag);
						}
					}
					if (this.artype === 2) {
						let res = await this.$http.post('/app/ar/queryAr', {
							base64: e.detail,
							jwd: l.latitude + ',' + l.longitude,
							lx: this.t
						});
						console.log(res)
						if (res.tpsp.status === 1) {
							if (res.tpsp.sp.lx === 2) {
								console.log(res.tpsp.sp.url);
								console.log(res.tpsp.tp.url);
								(this.startMp4 = res.tpsp.sp.url), (this.startImg = res.tpsp.tp.url), (this.flag =
									false);
								this.r1 = res.tpsp.cc.rotation1,
									this.r2 = res.tpsp.cc.rotation2,
									this.r3 = res.tpsp.cc.rotation3,
									this.s1 = res.tpsp.cc.scale1,
									this.s2 = res.tpsp.cc.scale2,
									this.s3 = res.tpsp.cc.scale3,
									console.log('标识', this.flag);
							}
							if (res.tpsp.sp.lx === 1) {
								console.log(res.tpsp.sp.url);
								console.log(res.tpsp.tp.url);
								(this.startMp4 = res.tpsp.sp.url), (this.startImg = res.tpsp.tp.url), (this.flag =
									false);
								console.log('标识', this.flag);
							}
							if (res.tpsp.yhq === 1) {
								this.yhq = true;
								this.yhqmc = res.tpsp.yhqxq.yhjmc
								this.yhqyxq = res.tpsp.yhqxq.kssj.slice(0, 10) + '至' + res.tpsp.yhqxq.jssj.slice(0, 10)
								this.yhqid = res.tpsp.yhqxq.id
							}
						}
					}
				} catch (e) {
					this.flag = false;
					console.log(e);
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.yhj {
		background-image: url($imgUrl + '/why.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100vw;
		height: 150rpx;
		margin-bottom: 20rpx;

		.but {
			width: 15vw;
			color: #ffffff;
			margin-top: -35rpx;
			margin-left: 640rpx;

			image {
				height: 55rpx;
				width: 55rpx;
			}

			.lq {
				position: relative;
				top: -5rpx;
				left: -1rpx;
			}
		}

		.mc {
			position: relative;
			top: 45rpx;
			left: 30rpx;
			color: #ffffff;
			width: 75vw;
		}
	}

	.ar {
		height: 100vh;
		width: 100vw;
		position: relative;
		background-color: #000;
	}

	.tx {
		opacity: 0.3;
		background-color: #000;
		width: 100vw;
		color: #ffffff;
	}

	.txwz {
		margin-left: 50rpx;
		margin-top: 2rpx;
	}

	.footer {
		display: flex;
		flex-direction: column;
		position: absolute;
		bottom: 40rpx;
		z-index: 100;
		width: 100%;

		.save {
			margin-bottom: 30rpx;
			display: flex;
			justify-content: center;
			width: 100%;

			.menu {
				width: 150rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					height: 40rpx;
					width: 40rpx;
				}

				view {
					color: #fff;
				}
			}
		}

		.camera {
			display: flex;
			justify-content: center;
			width: 100%;

			.menu {
				width: 150rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					height: 40rpx;
					width: 40rpx;
				}

				view {
					color: #fff;
				}
			}

			.active {
				width: 150rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					height: 40rpx;
					width: 40rpx;
				}

				// view {
				// 	color: #007aff;
				// }
			}
		}
	}
</style>